<template>
    <div class="top-bar">
            <div class="top-box" ref="topBox">
                <div class="top-box-logo"><img :src="office.officeLogo"></div>
                <ul>
                    <li :class="{activeNav:(activeIndex == (index+1))}" v-for="(item,index) in navList" @click="updateColunm(index)">
                        <span><i :class="item.colunmIcon"></i>&nbsp;&nbsp;{{item.colunmName}}</span>
                    </li>
                </ul>
            </div>

    </div>
</template>

<script>
    import topBarApi from '@/api/topBarApi'

    export default {
        name: "TopBar",
        data(){
            return{
                officeId:'0010a5ad4b4e1293bb005199c2c8cb31',
                office:{},
                activeIndex:'1',
                navList:[]
            }
        },
        methods:{
            updateColunm(index){
                this.activeIndex = (index+1)
                if (this.activeIndex=='1'){
                    this.$router.push({path: '/index', query:{activeIndex: (index+1)}})
                }
                if (this.activeIndex=='2'){
                    this.$router.push({path: '/dynamic', query:{activeIndex: (index+1)}})
                }
                if (this.activeIndex=='3'){
                    this.$router.push({path: '/service', query:{activeIndex: (index+1)}})
                }
                if (this.activeIndex=='4'){
                    this.$router.push({path: '/newNotice', query:{activeIndex: (index+1)}})
                }
                if (this.activeIndex=='5'){
                    this.$router.push({path: '/aboutMe', query:{activeIndex: (index+1)}})
                }
                if (this.activeIndex=='6'){
                    this.$router.push({path: '/linkMe', query:{activeIndex: (index+1)}})
                }
            }
        },
        created:async function () {
            let activeIndex= this.$route.query.activeIndex
            if (activeIndex!=undefined){
                this.activeIndex=activeIndex
            }
            //查询公司信息
            let res = await topBarApi.getOffice(this.officeId)
            if (res.code == '200'){
                this.office = res.data
            }
            //查询菜单信息
            let res2 =await  topBarApi.getColunm();
            if (res2.code == '200'){
                this.navList = res2.data
            }
            //查询key
            let res3 = await topBarApi.getByKey("colunmBackground")
            if (res3.code == '200'){
                this.$refs.topBox.style.backgroundColor = res3.data.paramValue
            }
        }
    }
</script>

<style scoped>
    .top-bar{
        width: 100%;
        height: 100px;
    }
    .top-box{
        background-color: #FFFFFF;
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
    .top-box-logo{
        line-height: 100px;
        float: left;
        margin-left: 15%;
        margin-right: 100px;
        margin-top: 15px;
        height: 80px;
        width: 150px;
    }
    ul{
        float: left;
        height: 100%;
        overflow: hidden;
    }
    ul > li {
        margin-left: 20px;
        cursor: pointer;
        color: #333;
        list-style: none;
        float: left;
        height: 96px;
        width: 110px;
        text-align: center;
    }
    ul > .activeNav{
        border-bottom: 4px red solid;
    }


</style>